<template>
  <div class="login_body">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="用户注册"></el-step>
      <el-step title="获取验证码"></el-step>
      <el-step title="注册成功"></el-step>
    </el-steps>
    <el-input
      class="un"
      v-model="un"
      @input="changeUserName"
      placeholder="账户名/手机号/Email"
    ></el-input>
    <el-input
      class="pw"
      @input="changeUserName"
      placeholder="请输入密码"
      v-model="pw"
      show-password
    ></el-input>
    <el-input
      class="uc"
      v-model="uc"
      @blur.prevent="changePervent()"
      placeholder="请输入验证码"
      
    ></el-input>
    <el-button
      class="yzm"
      type="warning"
      @click="
        yzmHandler();
        next();
      "
      :disabled="submitDisabled"
      >点击获取验证码</el-button
    >
    <!-- <el-button class="elnext" type="success" @click="next">下一步</el-button> -->
    <el-button
      class="elnext"
      type="success"
      :disabled="!un || !pw || !uc"
      @click="
        next();
        registHandler();
      "
      >点击注册</el-button
    >
    <!-- <button @click='registHandler'>点击注册</button> -->
    <div class="pic">
      <img class="gif" src="/images/miao.gif" alt="" />
      <img class="qp" src="/images/qp.png" alt="" />
      <div class="miao">
        喵!本次验证码为<span class="miaonum">{{ ucnum }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  // ready(){
  //           this.submitDisabled = true;
  //       },
  data() {
    return {
      active: 0,
      un: "",
      pw: "",
      uc: "",
      ucnum: "",
      count: "",
      submitDisabled: true,
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    changeUserName(un, pw) {
      un = this.un;
      pw = this.pw;
      if ((un, pw)) {
        this.submitDisabled = false;
      } else {
        this.submitDisabled = true;
      }
    },
    //获取验证码
    async yzmHandler() {
      let res = await this.$axios.post("/user/sendVerify", { mobile: this.un });
      //   console.log(res.data.verifyCode);
      this.ucnum = res.data.verifyCode;
      // this.state = !this.state;
      this.submitDisabled = !this.submitDisabled;
    },
    // changeUC(uc) {
    //   uc = this.uc;
    //   if (uc == this.ucnum) {
    //     setTimeout(() => {
    //       this.$router.push({ path: "/mine/login" }); // 强制切换当前路由 path
    //     }, 2000);
    //   } else {
    //     this.$message.error("验证码错误");
    //   }
    // },

     changePervent(){
      // console.log('失去焦点')
      // console.log(this.uc);
      if (this.uc == this.ucnum && this.uc !=='') {
        this.$message({type: "success",message:"注册成功"});
      }else{
        this.$message.error("验证码错误");
      }
  },
    // 用户注册
    async registHandler() {
      let res = await this.$axios.post("/user/register", {
        mobile: this.un,
        password: this.pw,
        verifyCode: this.uc,
      });
       if (this.uc == this.ucnum){
        this.active++;
        setTimeout(() => {
          this.$router.push({ path: "/mine/login" }); // 强制切换当前路由 path
        }, 2000);
      }else{
        this.active = 0
        this.active++
      }
        
    },
    // 另一种方法
    // startDivi(){
    //     const TIME_COUNT = 5;
    //     if(!this.timer){
    //         this.count = TIME_COUNT;
    //         this.show = false;
    //         this.timer = setInterval(()=>{
    //         if(this.count > 0 && this.count <= TIME_COUNT){
    //             this.count--;
    //         }else{
    //             this.show = true;
    //             clearInterval(this.timer);
    //             this.timer = null;
    //             //跳转到登录页
    //             this.$router.push({
    //                 path: '/mine/login'
    //             });
    //         }
    //       },400)
    //     }
    // },
  },
};
</script>

<style scoped>
.miaomiao {
  width: 200px;
  height: 121px;
  margin: 20px auto;
}
#content .login_body {
  width: 100%;
}
.login_body .login_text {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px #ccc solid;
  margin-bottom: 5px;
  outline: none;
  text-indent: 10px;
}
.login_body .login_btn {
  height: 50px;
  margin: 10px;
}
.login_body .login_btn input {
  width: 100%;
  height: 100%;
  background: #e54847;
  border-radius: 3px;
  border: none;
  display: block;
  color: white;
  font-size: 20px;
}
.login_body .login_link {
  display: flex;
  justify-content: space-between;
}
.login_body .login_link .register {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
}

.un {
  width: 100%;
  margin-top: 30px;
}
.pw {
  width: 100%;
  margin-top: 15px;
}
.uc {
  width: 50%;
  margin-top: 15px;
  margin-left: 3%;
}
.yzm {
  float: right;
  margin-top: 15px;
  margin-right: 3%;
}

.elnext {
  width: 100%;
  height: 50px;
  font-size: 18px;
  margin: 0 auto;
  margin-top: 15px;
}
.el-steps {
  margin-top: 20px;
}
.gif {
  width: 70%;
  margin: 0 auto;
  position: absolute;
  top: 57%;
}
.qp {
  width: 50%;
  position: absolute;
  top: 60%;
  left: 48%;
}
.miao {
  position: absolute;
  color: brown;
  margin-top: 38px;
  margin-left: 222px;
}
.miaonum {
  display: block;
  font-size: 20px;
  margin-top: 5px;
  margin-left: 30px;
}
.pic {
  width: 100%;
  height: 50px;
}
</style>


